<template>
  <div class="wrapper">
    <!-- 商品 -->
    <div class="box goods-item ">
      <div class="flex">
        <div>
          <u-image width="200" height="200" :src="memberReviewData.goodsImage"></u-image>
        </div>
        <div class="goods-name">
          <div class="wes-2">{{memberReviewData.goodsName}}</div>
        </div>
      </div>
      <div class="goods-total">
        <div class="flex">
          <div>评价</div>
          <div>{{memberReviewData.grade =='GOOD' ?'好评' : memberReviewData.grade == 'MODERATE' ? '中评' : '差评' }}</div>
        </div>
        <div class="flex">
          <div>状态</div>
          <div>{{memberReviewData.status =='OPEN' ? '展示' :  '隐藏' }}</div>
        </div>
        <div class="flex">
          <div>回复状态</div>
          <div>{{memberReviewData.replyStatus  ?'已评价' :'未评价'  }}</div>
        </div>
      </div>
    </div>
    <u-gap bg-color="#f7f7f7"></u-gap>
    <!-- 评价部分 -->
    <div class="comment-box">
      <div class="title">评价内容</div>
        <view  class="field-input">{{ memberReviewData.content }}</view>
    </div>

    <!-- 回复 -->
    <div class="reply-box">
      <div class="title">回复</div>
      <u-input :disabled="memberReviewData.replyStatus" class="field-input" height="500" :border-bottom="false" v-model="submit.reply" type="textarea">
      </u-input>

      <u-upload :disabled="memberReviewData.replyStatus" :header=" { accessToken: storage.getAccessToken() }" :action="action" width="200" @on-uploaded="onUploaded" :max-count="5"
        :show-progress="false"></u-upload>

    </div>

    <div class="submit" v-if="!memberReviewData.replyStatus" @click="handleSubmit()">提交</div>

  </div>
</template>

<script>
import storage from "@/utils/storage.js";
import { upload } from "@/api/common.js";
import { getMemberInfoReview, replyMemberReview } from "@/api/member";
export default {
  data() {
    return {
      storage,
      action: upload,
      routerVal: "",
      memberReviewData: {},
      submit: {
        replyImage: [],
        reply: "",
      },
    };
  },
  onLoad(options) {
    this.routerVal = options;
    this.init(options.id);
  },
  onShow() {
    this.init(this.routerVal.id);
  },
  methods: {
    // 图片上传
    onUploaded(lists) {
      let images = [];
      lists.forEach((item) => {
        images.push(item.response.result);
      });
      this.submit.replyImage = images;
    },
    async init(id) {
      let res = await getMemberInfoReview({ id });
      if (res.data.success) {
        this.memberReviewData = res.data.result;
        this.submit.reply = res.data.result.reply || "";
        // this.submit.replyImage.push( )res.data.result.replyImage
      }
    },
    //回复
    async handleSubmit() {
      let res = await replyMemberReview(this.routerVal.id, this.submit);
      uni.showLoading({
        title: "加载中",
        mask: "true",
      });
      if (res.data.success) {
        uni.showToast({
          title: "评论成功",
          duration: 2000,
          icon: "none",
        });

        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      }
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding-bottom: 200rpx;
}
.goods-price {
  text-align: right;
}
.title {
  margin-top: 30rpx;
  font-size: 30rpx;
  font-weight: bold;
}
.goods-item {
  padding: 32rpx 16rpx;
}

.goods-name {
  flex: 2;
  margin-left: 20rpx;
}
.submit {
  width: 84%;
  margin: 80rpx auto;
}
.comment-box,
.reply-box {
  padding: 0 16rpx;
}
.field-input {
  margin: 20rpx 0;
  padding: 10rpx 20rpx !important;
  background: #fafafa;
  border-radius: 20rpx;
}
.goods-total {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;

  > .flex {
    justify-content: space-between;
    margin: 10rpx 0;
    line-height: 1.75;

    > div:nth-of-type(1) {
      font-size: 24rpx;
      color: #999;
    }
    > div:nth-of-type(2) {
      font-weight: bold;
      > span {
        font-size: 40rpx;
        margin-left: 10rpx;
      }
    }
    > div {
      margin: 0 4rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>